<template>
  <div class='photoContainer'>
      <nav class="mui-bar mui-bar-tab">
          <a  class="mui-tab-item" @click.prevent='getPList(10)'>
            <span class="mui-tab-label" >全部</span> </a>

          <a  class="mui-tab-item" @click.prevent='getPList(2)'>
            <span class="mui-tab-label">摄影设计</span></a>

          <a  class="mui-tab-item" @click.prevent='getPList(3)'>
            <span class="mui-tab-label">明星美女</span></a>

          <a  class="mui-tab-item" @click.prevent='getPList(4)'>
            <span class="mui-tab-label">动物萌宠</span></a>   
      </nav>
      <ul class="photo-list">
        <router-link :to="'/home/photoInfo/'+item.createdAt" v-for='item in pList' :key="item.createdAt">
          <!-- <img :src="item.url" alt=""> -->
          <img v-lazy="item.url">
        </router-link>
      </ul>
    
      <!-- <ul class="photo-list">
      <router-link v-for='item in pList' :key='item.createdAt' tag='li'>
        <img :src='item.url' v-lazy='item'>
       
      </router-link>

    </ul> -->
  </div>
</template>
<script>
  import { Toast } from "mint-ui";
  export default{
    data() {
      return {
        select: "",
        pList: [],
        page: "",
      }
    },
   created() {
    this.getPList(10);
   },
    methods: {
      getPList(p){
        this.pList=[];
        this.$http.get("https://www.apiopen.top/meituApi?page="+p).then(responce=>{

          if (responce.body.code===200) {         
              this.pList = responce.body.data;
          }else {
            Toast("获取图片失败")
          }
        },(err)=>{
          Toast(err)
        })
      }
    }
  }
</script>
<style scoped>
  body {
    background-color: #ffffff;
  }
   image[lazy=loading] {
     width: 40px;
     height: 300px;
     margin: auto;
   }
   .photo-header {
     width: 100%;
   }
   .photo-header ul{
     width: 200%;
     height: 35px;
     background-color: gray;
     padding: 0px;
     overflow: hidden;
     
   }
   .photo-header ul li {
      float: left;
      list-style: none;
      height: 100%;
      width: 16.666667%;
      border: 1px solid blue; 
   }
  .mui-bar-tab {
    top: 40px;
  }
  .photo-list {
    list-style: none;
  }
  .photo-list img {
    width: 90%;
    height: auto;
    background-color: #ffffff;

  }
  .photoContainer {
    padding-top: 40px;
  }
</style>